<template>
    <div class="con">
        <div class="row head">
            <div class="w-150">案号</div>
            <div class="flex-1">案由</div>
            <div class="w-150">开庭地点</div>
            <div class="w-100">法官</div>
            <div class="w-150">开庭状态</div>
            <div class="w-60">查看</div>
        </div>
        <swiper :options="swiperOptions" class="swiper">
            <swiper-slide v-for="(cur, i) in 30" :key="i" class="swiper-item">
                <div class="row">
                    <div class="w-150">(2024)渝0103民初1141号</div>
                    <div class="flex-1">名誉权纠纷</div>
                    <div class="w-150">第十审判庭</div>
                    <div class="w-100">张三</div>
                    <div class="w-150">正在开庭</div>
                    <div class="w-60 btn" @click="$emit('clickItem')" >查看</div>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<script>

export default {
    name: 'ChartSwiper',
    data() {
        return {
            swiperOptions: {
                loop: true,
                direction: 'vertical',
                slidesPerView: 13,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false
                }
            },
        }
    },
    methods: {
        clickRow(i) {
            if (i == 1) {
                this.$emit('clickRow')
            }
        }
    }
}
</script>

<style lang="less" scoped>
.con {
    height: 495px;
    margin: 10px 24px 0;
    border: 1px solid rgb(51 88 142);
    overflow: hidden;
}


.row {
    height: 50px;
    color: rgb(255, 255, 255);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgb(51 88 142);

    div {
        border-right: 1px solid rgb(51 88 142);
        height: 50px;

        &:last-child {
            border: none;
        }
    }

    .w-60 {
        width: 60px;
    }

    .w-100 {
        width: 130px;
    }

    .w-150 {
        width: 200px;
    }

    .flex-1 {
        flex: 1;
    }
}

.row>div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.head {
    border-bottom: none;
    background: rgb(35 58 90);
    color: rgb(56 197 218);
    font-size: 16px;
}

.swiper {
    height: 650px;
}

.top-3:nth-child(3) {
    color: rgb(249, 137, 60);
    cursor: pointer;
}
.btn{
    cursor: pointer
}
.btn:hover{
    
    color: rgb(56 197 218);
}
</style>